<template>
    <el-dialog v-model="outerVisible" title="修改商品信息" @close="closeAddShop" width="30%" :close-on-click-modal="false">
        <template #default>
            <el-dialog v-model="innerVisible" width="30%" :title="showInfo" append-to-body />
        </template>
        <template #footer>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="名称" prop="shopName">
                    <el-input v-model="ruleForm.shopName" style="width: 180px" />
                </el-form-item>
                <el-form-item label="类别" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="选择类别">
                        <el-option v-for="(item, index) in types" :key="index" :label="item.typeName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="ruleForm.price" style="width: 180px" />
                </el-form-item>
                <el-form-item label="图片" prop="path">       
                        <img  :src="ruleForm.path" class="avatar" />
                    
                    <!-- <el-upload 
                        ref="upload"
                        class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false"
                        :on-change="handleFileChange"
                        :auto-upload="false">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload> -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="addUserLoading">更新商品信息
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { ref, toRefs, toRef, reactive, watch, computed, PropType, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { updateShop } from '@/api/shops'

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

interface shopInfoType {
    id: number,
    shopName: string,
    type: number,
    price: number,
    path:Blob
}
const props = defineProps({
    updateShopShow: Boolean,
    types: Object,
    shopInfo: Object as PropType<shopInfoType>
    // shopInfo:Object
})

const ruleForm = reactive({
    id: '',
    shopName: '',
    type: '',
    price:'',
    path:''
})

watch(
    () => props.shopInfo,
    (newVal: any, oldVal: any) => {
        // console.log(newVal)
        // console.log(oldVal)
        ruleForm.id = newVal.id;
        ruleForm.shopName = newVal.shopName;
        ruleForm.type = newVal.type;
        ruleForm.price = newVal.price;
        ruleForm.path = newVal.path;
    },
)

const showInfo = ref('')

const rules = reactive<FormRules>({
    shopName: [
        { required: true, message: '请输入商品名', trigger: 'blur' },
        { min: 2, max: 10, message: '用户名长度在2到10个字符', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入价格', trigger: 'blur' },
        { min: 0, max: 10, trigger: 'blur' },
    ],
    type: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'change',
        },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            submitEditShop();
        } else {
            console.log('error submit!', fields)
        }
    })
}
const emit = defineEmits(['closeUpdateShop', 'updateShopComplete'])

const addUserLoading = ref(false);

const submitEditShop = async () => {
    addUserLoading.value = true;
    try {
        console.log("ruleForm", ruleForm)
        const updateResult: any = await updateShop(ruleForm);
        addUserLoading.value = false;
        if (updateResult.success) {
            console.log("updateResult", updateResult)
            emit('updateShopComplete');
            outerVisible.value = false;
            ElMessage({
                    type: 'info',
                    message: updateResult.info.msg,
                })
        } else {
            showInfoBox(updateResult.info.msg)
        }
    } catch (error) {
        console.log(error);
        addUserLoading.value = false;
    }
}

const showInfoBox = (info: string) => {
    showInfo.value = info;
    innerVisible.value = true;
}

const outerVisible = computed({
    get() {
        return props.updateShopShow;
    },
    set(v) {
        emit('closeUpdateShop', "close Update shop")
    },
});

const innerVisible = ref(false)

const closeAddShop = () => {
    // console.log("close add shop")
    outerVisible.value = false;
}
</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>